<template>
    <div class="worksMain">
        
        <div class="position">
            <div class="sub"><em>Design information</em>  设计资讯</div>
        </div>

        <div class="pdf_box">
            <el-carousel :autoplay="false" :initial-index="initIndex" indicator-position="none" class="swiper_bd" ref="mySilder">
                <el-carousel-item v-for="(item,index) in newList" :key="index" name="index">
                    <ul>
                        <li v-for="(detail,index2) in item" :key="index2" @click="showPdf(detail.pid)">
                            <div class="pdf_bd">
                                <pdf
                                    :src="detail.url"
                                    @progress="loadedRatio = $event"
                                ></pdf>
                            </div>
                        </li>
                    </ul>
                </el-carousel-item>
            </el-carousel>
        </div>
        
        <el-dialog
            title="设计资讯"
            :visible.sync="dialogVisible"
            :fullscreen="true">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane :label="item.label" v-for="(item,index) in pdfUrl" :key="index">
                    <iframe width="100%" :height="height" frameborder="0" :src="item.url"></iframe>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script>
    import pdf from 'vue-pdf'
    import { info_data } from '@/assets/js/getData';
    import { mapState } from 'vuex';
    export default {
        name: 'info',
        data(){
            return {
                date:'',
                newList:[],
                list:[],
                pdfUrl:[],
                activeName:'0',
                dialogVisible:false,
                height:'',
                initIndex:0,
                loadedRatio:0, //pdf下载的进度
                loadNum:0,
            }
        },
        components: {
            pdf
        },
        computed:{
            ...mapState([
                'baseInfo'
            ]),
            isLoad:function(){
                return this.baseInfo.year;
            }
        },
        watch:{
            isLoad:function(val){
                if(val){
                    this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                    this.init();
                }
            },
            loadedRatio:function(val){
                if(this.$route.params.id === undefined && val==1){
                    this.loadNum++;
                    this.$emit('getMessage', {
                        num:this.loadNum,
                        total:this.list.length,
                        loading:true
                    })
                }
            },
            $route(){
                this.$refs.mySilder.setActiveItem(this.$route.params.id);
            }
        },
        mounted(){
            if(this.$route.params.id === undefined){
                this.$emit('getMessage', {
                    num:1,
                    loading:true
                })
            }
            if(this.$route.params.id){
                this.initIndex = parseInt(this.$route.params.id);
            }
            if(this.baseInfo.year){
                this.date = this.baseInfo.year + '-' + this.baseInfo.month;
                this.init();
            }
        },
        methods:{
            async init(){
                const res = await info_data({data:encodeURI(JSON.stringify({yf:this.date,fl:'0'}))});
                if(res.code == '0'){
                    this.pdfUrl = res.data.pdf;
                    this.list = res.data.splitPDF;
                    this.newList = this.arrChunk(this.list,2);
                }else{
                    this.$message({
                        showClose:true,
                        message: res.message,
                        type: 'error'
                    });
                }
            },
            showPdf(id){
                this.pdfUrl.forEach((item,index) => {
                    if(item.pid == id){
                        this.activeName = index.toString();
                    }
                });
                this.height = window.innerHeight - 180;
                this.dialogVisible  = true;
            }
        }
    }
</script>

<style scoped>
    .worksMain{position: relative;height:100%;}

    .position{position: absolute;right:15px;top:10px;z-index:3;}
    .position .sub{line-height:20px;font-size: 12px;text-align:right;color: #7987a3;}
    .position .sub em{font-style: italic;}
    .position .title{width: 84px;line-height:24px;font-size: 14px;text-align:right;color: #353942;float:right;}

    .pdf_box{height:100%;}
    .swiper_bd{height:100%;}
    .swiper_bd >>> .el-carousel__container{height:100%;}
    .swiper_bd >>> .el-carousel__container li:nth-child(even):after{content:"";position: absolute;width:50%;height: 100%;background: url(../../assets/img/shadow.png) no-repeat;top: 0;right: 0;z-index:1;}
    .swiper_bd >>> .el-carousel__arrow{width:60px;height:60px;font-size:24px;}
    .swiper_bd >>> .el-carousel__arrow i{font-weight:bold;}
    .swiper_bd >>> .el-carousel__arrow--left{left:40px;}
    .swiper_bd >>> .el-carousel__arrow--right{right:40px;}
    .swiper_bd ul{position: relative;height:100%;}
    .swiper_bd ul li{width:50%;float: left;height:100%;}
    .swiper_bd .pdf_bd{height:100%;margin:0 auto;}
</style>